Next.js Edge Config：轻松实现全球配置分发

在当今快节奏的 Web 开发领域，为全球用户提供个性化和动态的体验至关重要。Next.js，作为一个流行的 React 框架，为构建高性能和可扩展的 Web 应用程序提供了强大的解决方案。其关键特性之一是 Edge Config，这是一个在边缘进行全球配置管理和分发的强大工具。本篇博客文章将全面指导您理解和利用 Next.js Edge Config，以优化您的应用程序性能，并为全球受众提供量身定制的体验。

什么是 Next.js Edge Config？

Next.js Edge Config 是一个全球分布式的低延迟键值存储，专门设计用于向 Next.js 边缘函数（Edge Functions）提供配置数据。与传统数据库或 API 不同，Edge Config 针对速度和效率进行了优化，让您可以在世界任何地方以毫秒级的速度访问配置数据。这使您能够根据配置值动态调整应用程序的行为，而不会牺牲性能。

您可以将其视为一个全球复制的 JSON 文件，您可以从边缘函数中以极快的速度查询它。这使其非常适用于：

• A/B 测试：动态地向不同的用户群体提供不同版本的应用程序。
• 功能标志：根据配置值启用或禁用功能。
• 个性化：根据用户偏好或位置定制内容和体验。
• 地理路由：根据用户的位置将他们路由到不同的资源。
• 速率限制：根据配置值实施速率限制。
• 国际化 (i18n)：根据用户的区域设置提供不同的内容，尽管 Next.js 也内置了 i18n 支持。Edge Config 可以处理复杂的区域路由场景。

为何使用 Edge Config？

以下是使用 Next.js Edge Config 的主要优势：

• 全球分发：数据复制到 Vercel 的全球边缘网络，确保从世界任何地方都能低延迟访问。
• 低延迟：为速度而优化，让您可以在毫秒内访问配置数据。
• 原子更新：更新是原子性的，确保数据一致性。您永远不会遇到在部署期间某些边缘节点拥有旧数据而其他节点拥有新数据的情况。
• 简化的配置管理：为管理应用程序的配置提供了一个中心位置。
• 与 Next.js 无缝集成：旨在与 Next.js 边缘函数无缝协作。
• 提升性能：减少了从数据库或 API 获取数据的需求，从而提高了应用程序性能。
• 降低基础设施成本：通过消除对额外数据库或 API 的需求来存储配置数据，有助于降低基础设施成本。
• 增强安全性：安全地存储和管理您的应用程序配置数据。

如何开始使用 Edge Config

以下是开始使用 Next.js Edge Config 的分步指南：

1. 项目设置

确保您有一个 Next.js 项目。如果没有，请使用以下命令创建一个：

            npx create-next-app@latest my-app
cd my-app
            

              
                Copy
              
            
          

2. 创建一个 Edge Config

您需要一个 Vercel 账户才能使用 Edge Config。登录后，导航到您的 Vercel 项目并创建一个新的 Edge Config。给它起一个描述性的名称。

3. 安装 Edge Config SDK

在您的 Next.js 项目中安装 @vercel/edge-config SDK：

            npm install @vercel/edge-config
# or
yarn add @vercel/edge-config
# or
pnpm install @vercel/edge-config
            

              
                Copy
              
            
          

4. 配置环境变量

您需要配置 EDGE_CONFIG 环境变量。您可以在 Vercel 仪表板中找到您的 Edge Config 的该变量值。将其添加到您的 .env.local 文件中（或在 Vercel 项目设置中用于生产环境）：

            EDGE_CONFIG=your_edge_config_url
            

              
                Copy
              
            
          

重要提示：切勿将您的 .env.local 文件提交到代码仓库。请为生产环境使用 Vercel 的环境变量设置。

5. 在代码中访问配置值

现在您可以在 Next.js 代码中访问您的 Edge Config 值了。这是一个示例：

            // pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const featureFlag = await get('featureFlag');
  const welcomeMessage = await get('welcomeMessage');

  return {
    props: {
      featureFlag,
      welcomeMessage,
    },
  };
}

export default function Home({ featureFlag, welcomeMessage }) {
  return (
    <div>
      <h1>{welcomeMessage}</h1>
      {featureFlag ? <p>Feature is enabled!</p> : <p>Feature is disabled.</p>}
    </div>
  );
}

            

              
                Copy
              
            
          

在这个例子中，我们在 getServerSideProps 中从 Edge Config 获取 featureFlag 和 welcomeMessage 的值。这些值随后作为 props 传递给 Home 组件。

6. 更新配置值

您可以通过 Vercel 仪表板更新 Edge Config 中的值。更改会在毫秒内全球同步。

高级用例与示例

使用 Edge Config 进行 A/B 测试

Edge Config 非常适合 A/B 测试。您可以定义一个配置值来决定向用户提供哪个版本的应用程序。例如：

1. 创建一个名为 abTestGroup 的 Edge Config 键。
2. 将其值设置为 A 或 B。
3. 在您的边缘函数中，读取 abTestGroup 的值。
4. 根据该值，提供 A 版本或 B 版本的内容。

这是一个示例：

            // pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const abTestGroup = await get('abTestGroup');

  let content;
  if (abTestGroup === 'A') {
    content = 'This is version A!';
  } else {
    content = 'This is version B!';
  }

  return {
    props: {
      content,
    },
  };
}

export default function Home({ content }) {
  return (
    <div>
      <h1>A/B Test</h1>
      <p>{content}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

您可以使用分析工具来跟踪每个版本的性能，并确定哪个版本表现更好。可以考虑使用 Google Analytics、Amplitude 或 Mixpanel 等工具进行全面的 A/B 测试数据收集和分析。

使用 Edge Config 实现功能标志

功能标志允许您在不部署新代码的情况下启用或禁用功能。这对于在生产环境中测试新功能或逐步向部分用户推出功能非常有用。与 A/B 测试类似，您可以通过 Edge Config 中的一个简单布尔标志来控制功能的可用性。

1. 创建一个名为 newFeatureEnabled 的 Edge Config 键。
2. 将其值设置为 true 或 false。
3. 在您的边缘函数中，读取 newFeatureEnabled 的值。
4. 根据该值，启用或禁用新功能。

            // components/MyComponent.js
import { get } from '@vercel/edge-config';

export async function MyComponent() {
  const newFeatureEnabled = await get('newFeatureEnabled');

  return (
    <div>
      {newFeatureEnabled ? <p>New feature is enabled!</p> : <p>New feature is disabled.</p>}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

使用 Edge Config 实现个性化

您可以使用 Edge Config 根据用户偏好或位置来个性化内容和体验。例如，您可以将用户偏好存储在数据库中，然后使用 Edge Config 根据这些偏好提供不同的内容。

示例场景：一个全球电子商务网站希望根据用户所在的国家/地区显示产品推荐。他们可以使用 Edge Config 将国家/地区映射到推荐类别。

1. 创建一个名为 countryToCategoryMap 的 Edge Config 键。
2. 将其值设置为一个 JSON 对象，该对象将国家/地区映射到产品类别（例如，{"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}）。
3. 在您的边缘函数中，读取 countryToCategoryMap 的值。
4. 确定用户的国家/地区（例如，从他们的 IP 地址或 cookie 中）。
5. 使用 countryToCategoryMap 来确定合适的产品类别。
6. 显示该类别的产品推荐。

            // pages/products.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps(context) {
  const countryToCategoryMap = await get('countryToCategoryMap');
  const country = context.req.headers['x-vercel-ip-country'] || 'US'; // Default to US
  const category = countryToCategoryMap[country] || 'General'; // Default to General

  // Fetch product recommendations based on the category
  const products = await fetchProducts(category);

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Product Recommendations</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Replace with your actual product fetching logic
  return [
    { id: 1, name: `Product 1 (${category})` },
    { id: 2, name: `Product 2 (${category})` },
  ];
}

            

              
                Copy
              
            
          

此示例使用 x-vercel-ip-country 标头来确定用户的国家/地区。该标头由 Vercel 自动添加。需要注意的是，仅依赖基于 IP 的地理定位可能不总是准确的。为提高准确性，可以考虑使用其他方法，如用户提供的位置或更复杂的地理定位服务。

使用 Edge Config 实现地理路由

您可以使用 Edge Config 根据用户的位置将他们路由到不同的资源。这对于提供本地化内容或遵守地区法规非常有用。

1. 创建一个名为 countryToRedirectMap 的 Edge Config 键。
2. 将其值设置为一个 JSON 对象，该对象将国家/地区映射到 URL（例如，{"CN": "/china", "DE": "/germany"}）。
3. 在您的边缘函数中，读取 countryToRedirectMap 的值。
4. 确定用户的国家/地区（例如，从他们的 IP 地址）。
5. 将用户重定向到相应的 URL。

            // pages/_middleware.js
import { NextResponse } from 'next/server'
import { get } from '@vercel/edge-config';

export async function middleware(req) {
  const countryToRedirectMap = await get('countryToRedirectMap');
  const country = req.geo.country || 'US'; // Default to US
  const redirectUrl = countryToRedirectMap[country];

  if (redirectUrl) {
    return NextResponse.redirect(new URL(redirectUrl, req.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/',
}

            

              
                Copy
              
            
          

此示例使用了 req.geo.country 属性，该属性由 Vercel 的边缘网络自动填充用户的国家代码。这比直接解析 x-vercel-ip-country 标头更简洁、更可靠。中间件函数会检查 Edge Config 中是否为用户的国家定义了重定向 URL。如果是，它会将用户重定向到该 URL。否则，它将继续处理请求。

使用 Edge Config 实现速率限制

虽然 Edge Config 并非设计为功能完备的速率限制解决方案，但您可以将其与其他技术结合使用以实现基本的速率限制。其思路是在 Edge Config 中存储速率限制参数（例如，每分钟请求数），然后在您的边缘函数中使用这些参数来强制执行速率限制。

重要说明：此方法适用于简单的速率限制场景。对于更强大的速率限制，请考虑使用专用的速率限制服务或中间件。

1. 创建名为 requestsPerMinute 和 blockedIps 的 Edge Config 键。
2. 将 requestsPerMinute 的值设置为所需的速率限制。
3. 将 blockedIps 的值设置为应被阻止的 IP 地址数组。
4. 在您的边缘函数中，读取 requestsPerMinute 和 blockedIps 的值。
5. 检查用户的 IP 地址是否在 blockedIps 数组中。如果是，则阻止请求。
6. 使用缓存机制（例如，Redis 或 Vercel 的边缘缓存）来跟踪每个 IP 地址在最后一分钟内的请求数。
7. 如果来自用户 IP 地址的请求数超过 requestsPerMinute 限制，则阻止请求。

示例（仅为说明 - 需要额外实现缓存）：

            // pages/api/protected-route.js
import { get } from '@vercel/edge-config';

export default async function handler(req, res) {
  const requestsPerMinute = await get('requestsPerMinute');
  const blockedIps = await get('blockedIps');
  const ip = req.headers['x-real-ip'] || req.connection.remoteAddress; // Get user's IP

  // Check if IP is blocked
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO: Implement request counting and caching (e.g., using Redis or Vercel Edge Cache)
  // Example (Conceptual):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // Your protected route logic here
  res.status(200).send('Protected route accessed successfully!');
}

            

              
                Copy
              
            
          

速率限制的重要注意事项：

• 缓存：您需要使用缓存机制来跟踪请求计数。Vercel 的边缘缓存或 Redis 实例是不错的选择。
• IP 地址：通常使用 x-real-ip 标头或 req.connection.remoteAddress 来获取用户的 IP 地址。请注意，在某些情况下这些可能会被伪造。对于生产环境，请考虑使用更可靠的 IP 地址检测技术。
• 并发性：在增加请求计数时要注意并发问题。使用原子操作以确保准确性。
• 复杂性：实现一个强大的速率限制解决方案可能很复杂。对于更高级的功能和防范复杂攻击，请考虑使用专用的速率限制服务。

使用 Edge Config 的最佳实践

• 保持 Edge Config 小巧：Edge Config 专为少量数据优化。避免在 Edge Config 中存储大型数据集。
• 使用描述性的键名：使用清晰且描述性的键名，使您的配置更易于理解和维护。
• 对敏感数据使用环境变量：将 API 密钥等敏感数据存储在环境变量中，而不是直接存储在 Edge Config 中。
• 充分测试您的更改：在部署到生产环境之前，在预发布环境中测试您的更改。
• 监控您的 Edge Config：监控您的 Edge Config，以确保其按预期运行并识别任何潜在问题。Vercel 提供了监控工具，您可以用它来跟踪 Edge Config 的性能。
• 版本控制：虽然配置数据本身不像代码那样直接进行版本控制，但记录对 Edge Config 所做的更改并将其与特定的代码部署联系起来是一个好习惯。这有助于跟踪和理解配置的演变。
• 安全考量：将您的 Edge Config 数据视为有价值且可能敏感的数据。遵循管理机密和访问控制的安全最佳实践。

Edge Config 的替代方案

虽然 Edge Config 是一个强大的工具，但它并非总是适用于所有用例的最佳解决方案。以下是一些可以考虑的替代方案：

• 环境变量：对于不需要频繁更新的简单配置值，环境变量可能就足够了。
• 传统数据库：对于更大数据集或更复杂的配置需求，传统数据库（例如 PostgreSQL、MongoDB）可能是更好的选择。
• 内容管理系统 (CMS)：对于管理与内容相关的配置，CMS 可能是一个不错的选择。
• 功能管理平台：专用的功能管理平台（例如 LaunchDarkly、Split）提供更高级的功能标志和 A/B 测试功能。
• 无服务器数据库：像 FaunaDB 或 PlanetScale 这样的数据库专为无服务器环境设计，可以在配置数据的性能和可扩展性之间提供良好的平衡。

结论

Next.js Edge Config 是一个在边缘进行全球配置管理和分发的强大工具。通过利用 Edge Config，您可以优化应用程序的性能，提供个性化体验，并简化配置管理工作流程。无论您是在构建全球电子商务网站、社交媒体平台，还是任何其他类型的 Web 应用程序，Edge Config 都可以帮助您为全球用户提供快速且引人入胜的体验。立即探索其可能性，并将 Edge Config 集成到您的 Next.js 项目中，以释放其潜力！